<!DOCTYPE html>
<html lang="en">
    <head>

    </head>
    <body>
        <div id="main">
            <button id="fetch_button"
            onclick="validateData(
                'https://api.example.com/data'
                , document.getElementById('msg')
                )">
            >Fetch Data</button>
            <div id="msg"></div>
        </div>
        <script>
            function validateData(url,message_element){
                fetch(url).then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    message_element.innerHTML = "Data fetched successfully!";
                }).catch(error => {
                    message_element.innerHTML = "Error fetching data: " + error.message;
                });
                
            }
        </script>
    </body>
</html>